<script>
import Article from "@/components/Article.vue";

export default {
  components: {
    Article
  }
}
</script>
<template>
  <main class="main">
    <h1 class="main-title">Main Content</h1>
    <div>
      <Article/>
      <Article/>
    </div>

    <div>
      - Vue 本身是组件式开发，写好一个组件，将组件放到需要加载的页面中，即可实现效果。
    </div>
    <div>
      - 组件本身支持嵌套，如在本示例中，Vue 根组件中包含了 Header，Main 和 Aside 组件，而在 Main 组件中又可以引入 Article
      组件，形成嵌套，在
      Aside 组件中引入了 Item 组件。
    </div>
    <div>
      - 各个组件独立完成自己内容的渲染，然后放到需要引入的地方。
    </div>
  </main>
</template>

<style scoped>
.main {
  border: 2px solid blue;
  padding: 1rem;
  background-color: #ffffff;
  flex: 3;
}

.main-title {
  margin: 0;
}

div {
  font-size: 20px;
}
</style>